<template>
  <div>
    <div class="wrap" :style="'top:' + navHeight" ref="element">
      <van-search
        class="common_search"
        @search="confirm"
        @clear="clear"
        v-model="searchVal"
        :placeholder="placeholder"
        :maxlength="maxlength"
      />
    </div>
    <div ref="elementTap">
      <van-tabs
        v-if="showTab"
        v-model="active"
        @change="change"
        :style="'padding-top: ' + listPaddingTop"
        :sticky="true"
        :offset-top="this.listPaddingTap"
        title-active-color="#00c1de"
      >
        <div v-for="(item, index) in this.localParams" :key="index">
          <van-tab :title="item.title" :badge="item.cnt">
            <van-list
              :finished="finished"
              v-model="loading"
              finished-text="没有更多了"
              @load="loadMore"
            >
              <slot />
            </van-list>
          </van-tab>
        </div>
      </van-tabs>
      <van-list
        v-if="!showTab"
        :finished="finished"
        v-model="loading"
        finished-text="没有更多了"
        :offset-top="this.listPaddingTap"
        :style="'padding-top: ' + listPaddingTop"
        :sticky="true"
        @load="loadMore"
      >
        <slot />
      </van-list>
    </div>
  </div>
</template>
<script>
/**
 * PageTabList 带搜索tab过滤条件的分页列表
 * @property {String} placeholder 搜索栏Placeholder
 * @property {Number} maxlength 输入最大长度
 * @property {String} url 请求数据的path
 * @property {Object} params 搜索框条件对象
 *  params: {
      type: Array,
      default: () => [
        {
          title: "进行中的任务",
          badge: true,
          page: 0,
          limit: 10,
          dataType: "NotFinish",
        },
        {
          title: "未开始的任务",
          badge: false,
          page: 0,
          limit: 10,
          dataType: "NotStart",
        },
        {
          title: "已结束的任务",
          badge: false,
          page: 0,
          limit: 10,
          dataType: "Finished",
        },
      ],
    },
 * @event {Function} initList 数据回调    @initList="_initList" 返回数据为list
 * _initList(list){
      this.list = list
    },
 */
import { deepClone } from "@/utils";

export default {
  props: {
    placeholder: {
      type: String,
      default: "搜索",
    },
    showTab: {
      type: Boolean,
      default: true,
    },
    maxlength: {
      type: [Number, String],
      default: 100,
    },
    value: {
      type: [Number, String],
      default: "",
    },
    url: {
      type: String,
      default: "",
    },
    params: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      searchVal: "",
      localParams: [],
      resetParams: [],
      active: 0,
      conditions: [],
      list: [],
      loading: false,
      finished: false,
      count: 0,
      navHeight: 0,
      listPaddingTop: 0,
      listPaddingTap: 0,
      first: false,
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(newSearchVal) {
        this.searchVal = newSearchVal;
      },
    },
    searchVal(newVal, oldVal) {
      this.$emit("input", newVal);
    },
  },
  created() {
    let localArr = [
      {
        title: "进行中的任务",
        badge: false,
        page: 0,
        limit: 10,
        dataType: "NotFinish",
      },
      {
        title: "未开始的任务",
        badge: false,
        page: 0,
        limit: 10,
        dataType: "NotStart",
      },
      {
        title: "已结束的任务",
        badge: false,
        page: 0,
        limit: 10,
        dataType: "Finished",
      },
    ];
    for (let i = 0; i < this.params.length; i++) {
      this.localParams.push(Object.assign(localArr[i], this.params[i]));
    }
    this.resetParams = deepClone(this.localParams);
    this.first = true;
    this.getList();
  },
  mounted() {
    this.navHeight =
      document.getElementsByClassName("van-nav-bar")[0].offsetHeight + "px";
    this.listPaddingTop = window.getComputedStyle(this.$refs.element).height;
    this.listPaddingTap =
      Number(this.listPaddingTop.replace("px", "")) +
      Number(
        window.getComputedStyle(this.$refs.elementTap).height.replace("px", "")
      );
  },
  methods: {
    change() {
      this.$emit("initActive", this.active);
      if (this.list) {
        this.list.splice(0, this.list.length);
      }
      this.loading = false;
      this.finished = false;
      this.confirm();
    },
    clear() {
      this.searchVal = "";
      this.localParams = this.resetParams;
      this.getList();
    },
    confirm() {
      this.localParams[this.active].page = 0;
      var conditions = [];
      if (this.searchVal) {
        conditions.push({
          Name: "Keywords",
          DisplayName: this.searchVal,
          Value: this.searchVal,
          Operator: "like",
          DataType: "String",
        });
      }
      this.localParams[this.active].conditions = JSON.stringify(conditions);
      this.getList();
    },
    getList() {
      this.loading = true;
      this.$axios
        .get(this.url,{params:this.localParams[this.active]})
        .then((res) => {
          this.loading = false;
          if (!res.data.HasNextPage) {
            this.finished = true;
          }
          this.list = res.data.Data;
          //   this.count = res.data.TotalCount > 99 ? "99+" : res.data.TotalCount;
          if (this.localParams[this.active].badge) {
            this.localParams[this.active].cnt =
              res.data.TotalCount > 99 ? "99+" : res.data.TotalCount;
          } else {
            this.localParams[this.active].cnt = "";
          }
          this.localParams.forEach((item) => {
            if (!item.badge) {
            }
          });
          this.localParams[this.active].page = res.data.PageIndex;
          this.$emit("initActive", this.active);
          this.$emit("initList", this.list);
          this.first = false;
        })
        .catch((err) => {
          console.log("err", err);
          this.finished = true;
        });
    },
    loadMore() {
      if (!this.first) {
        this.loading = true;
        ++this.localParams[this.active].page;
        this.$axios
          .get(this.url,{params:this.localParams[this.active]})
          .then((res) => {
            this.loading = false;
            this.localParams[this.active].page = res.data.PageIndex;
            this.list = this.list.concat(res.data.Data);
            if (!res.data.HasNextPage) {
              this.finished = true;
            }
            this.$emit("initActive", this.active);
            this.$emit("initList", this.list);
          })
          .catch((err) => {
            console.log("err", err);
            this.finished = true;
          });
      }
    },
    refreshList() {
      this.confirm();
    },
  },
};
</script>
<style lang="less">
.wrap {
  width: 100%;
  position: fixed;
  z-index: 1000;
}
</style>
